<template>
    <el-row>
         <el-checkbox-group v-model="state.selectedStocks" max="2" @change="change">
            <el-checkbox  type="success" plain v-for="stock in state.stocks" :key="stock"  :value="stock" :label="stock"> {{ stock }}</el-checkbox>
         </el-checkbox-group>
    </el-row>

    <el-row>
        <el-button type="primary" @click="click('close')" plain >close</el-button>
        <el-button type="primary" @click="click('lp')" plain >lp</el-button>
        <el-button type="primary" @click="click('mean20WClose')" plain>20W</el-button>
        <el-button type="primary" @click="click('mean30WClose')" plain>30W</el-button>
        <el-button type="primary" @click="click('mean300Close')" plain>60W</el-button>
    </el-row>

    <el-row>
        相关系数：{{ state.sampleCorrelation.toFixed(2) }}
    </el-row>

    <div id="week-two-stock-compare-echart"  :style="{ width: '1000px', height: '600px'}"></div>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { reactive , onMounted} from 'vue'
import { getMultiWeekData } from '../service/week';
import * as echarts from 'echarts'
import { builtTowStockCompare } from '../myechart/multiYaxEchart';
import { sampleCorrelation } from '../utils/simpleStat';

const base = "WeekTwoStockCompare"

const state = reactive({
    key: sessionStorage.getItem(base) || "close",
    stocks: [],
    selectedStocks: [],
    sampleCorrelation: 0,
})

const {query: query} = useRoute()
if (query.stocks) {
    state.stocks = query.stocks.split(';')
    state.selectedStocks = state.stocks.slice(0,2)
}

let myChart = null
const initEchart = () => {
    myChart = echarts.init(document.getElementById('week-two-stock-compare-echart'))
    myChart.resize();
}

const loadEchart = () => {
    getMultiWeekData(state.selectedStocks.join(';'), 500).then(res => {
        let option = builtTowStockCompare(state.selectedStocks,res.data, state.key)
        myChart.setOption(option)

        state.sampleCorrelation = sampleCorrelation(res.data[state.selectedStocks[0]], res.data[state.selectedStocks[1]],state.key)
    })
}

onMounted(()=> {
    initEchart()
    loadEchart()
})

const click = (key) => {
    sessionStorage.setItem(base, key)
    state.key = key
    loadEchart()
}

const change = () => {
    loadEchart()
}

</script>